<template>
  <div>
    <!-- 头部 -->
    <myheader title="传智播客.黑马程序员Vue.js">
      <template #left>
        <div @click="$router.go(-1)">
          <van-icon name="arrow-left" />
          返回
        </div>
      </template>
    </myheader>
    <div class="goodsDetial">
      <!-- 轮播图 -->
      <div class="detail">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#aaa">
          <van-swipe-item v-for="item in getimg" :key="item.src">
            <img :src="item.src" alt="" />
          </van-swipe-item>
        </van-swipe>
      </div>

      <!-- 商品价格详情 -->
      <div class="detail">
        <p class="title">{{ getinfo && getinfo.title }}</p>
        <hr />
        <div class="price">
          <span class="market"
            >市场价：<i>￥{{ getinfo && getinfo.market_price }}</i></span
          >
          <span class="sell"
            >销售价：<i
              >￥{{ getinfo && getinfo && getinfo.sell_price }}</i
            ></span
          >
        </div>
        <div>
          购买数量：<van-stepper
            v-model="value"
            style="display: inline-block"
          />
        </div>
        <van-button type="info" class="go">立即购买</van-button>
        <van-button type="danger" @click="addcar(getinfo.id)"
          >加入购物车</van-button
        >
      </div>
      <!-- 商品参数 -->
      <div class="detail">
        <p style="margin: 5px 0">商品参数</p>
        <hr />
        <div class="goodsdet">
          <p>商品货号：{{ getinfo && getinfo.goods_no }}</p>
          <p>库存情况：{{ getinfo && getinfo.stock_quantity }}件</p>
          <p>上架时间：{{ getinfo && getinfo.add_time | dateFilter }}</p>
        </div>
      </div>
      <!-- 图文介绍  商品评论 -->
      <div class="detail">
        <van-button
          plain
          type="info"
          style="width: 100%"
          @click="$router.push({ path: `/GoodsDesc/${getinfo.id}` })"
          >图文介绍</van-button
        >
        <van-button
          plain
          type="primary"
          style="width: 100%; margin-top: 15px"
          @click="$router.push({ name: 'Comment' })"
          >商品评论</van-button
        >
      </div>
    </div>
    <!-- 图文介绍  商品评论 -->
    <!-- <div class="detail">
      <van-button plain type="info" style="width: 100%">图文介绍</van-button>
      <van-button
        plain
        type="primary"
        style="width: 100%; margin-top: 15px"
        @click="$router.push({ name: 'Comment' })"
        >商品评论</van-button
      >
    </div> -->
  </div>
</template>

<script>
import { getinfo, getimg } from "@/Api/goods";
import { dateFilter } from "@/utils/filter";
import myheader from "@/components/myheader";
import { bus } from "@/utils/bus.js";
export default {
  data() {
    return {
      getinfo: [],
      getimg: [],
      value: 1,
      addShoppingCar: [],
    };
  },
  components: {
    myheader,
  },
  filters: {
    dateFilter,
  },
  //获取当前商品的详情数据
  async mounted() {
    //获取商品价格详情
    let res = await getinfo(this.$route.params.id);
    //console.log(res);
    this.getinfo = res.data.message[0];
    //获取轮播图
    let res2 = await getimg(this.$route.params.id);
    // console.log(res2);
    this.getimg = res2.data.message;
  },
  methods: {
    async addcar(id) {
      //获取本地是否已经有数据
      this.addShoppingCar = localStorage.getItem("addShoppingCar")
        ? JSON.parse(localStorage.getItem("addShoppingCar"))
        : [];
      //判断本地是否已经存在有相同id的对象 有的的话 添加
      /*  this.addShoppingCar = this.addShoppingCar.map((v) => {
        if ((this.$route.params.id = v.id)) {
          v.count = v.count + this.value;
        }
        return v;
      }); */
      // console.log(this.addShoppingCar);
      //将数据保存到本地
      this.addShoppingCar.push({ id, count: this.value });

      //console.log(this.addShoppingCar);
      localStorage.setItem(
        "addShoppingCar",
        JSON.stringify(this.addShoppingCar)
      );

      //提示添加成功
      this.$toast.success("加购成功");

      // 事件总线，添加商品数量
      bus.$emit("getTotalNum1", { type: "add", count: this.value });
      // this.resetSetItem("addShoppingCar", JSON.stringify(this.addShoppingCar));
    },
  },
};
</script>

<style lang="less" scoped>
.van-icon {
  vertical-align: text-bottom;
}
/deep/.van-swipe__indicators {
  i {
    background: #bbb;
  }
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #fff;
}
.goodsDetial {
  padding: 10px;
}
.detail {
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 15px;
  margin-top: 5px;

  .goodsdet {
    p {
      padding: 5px 70px;
    }
  }
}
.title {
  padding: 10px 0px;
  font-size: 25px;
  font-weight: 700;
  color: #39a9ed;
}
.sell {
  font-size: 16px;
  font-weight: 700;
  i {
    color: red;
    font-size: 20px;
  }
}
.price {
  margin: 20px 0;
}
.market {
  font-weight: 700;
  font-size: 14px;
  margin-right: 30px;
  i {
    text-decoration: line-through;
  }
}
.go {
  margin: 20px 10px;
}
img {
  width: 100%;
  height: 250px;
}
</style>